<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Button-demo-primary">默认样式</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Alert警告框</h1>
        <section class="markdown">
            <p>警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。</p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<div class="box-body">
  <div class="alert alert-danger alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-ban"></i> Alert!</h4>
    Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my entire
    soul, like these sweet mornings of spring which I enjoy with my whole heart.
  </div>
  <div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-info"></i> Alert!</h4>
    Info alert preview. This alert is dismissable.
  </div>
  <div class="alert alert-warning alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-warning"></i> Alert!</h4>
    Warning alert preview. This alert is dismissable.
  </div>
  <div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-check"></i> Alert!</h4>
    Success alert preview. This alert is dismissable.
  </div>
</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">默认样式</a></div>
                    <div>
                         <p>通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。</p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;alert alert-danger alert-dismissible&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
    &lt;h4&gt;&lt;i class=&quot;icon fa fa-ban&quot;&gt;&lt;/i&gt; Alert!&lt;/h4&gt;
    Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my entire
    soul, like these sweet mornings of spring which I enjoy with my whole heart.
  &lt;/div&gt;
  &lt;div class=&quot;alert alert-info alert-dismissible&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
    &lt;h4&gt;&lt;i class=&quot;icon fa fa-info&quot;&gt;&lt;/i&gt; Alert!&lt;/h4&gt;
    Info alert preview. This alert is dismissable.
  &lt;/div&gt;
  &lt;div class=&quot;alert alert-warning alert-dismissible&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
    &lt;h4&gt;&lt;i class=&quot;icon fa fa-warning&quot;&gt;&lt;/i&gt; Alert!&lt;/h4&gt;
    Warning alert preview. This alert is dismissable.
  &lt;/div&gt;
  &lt;div class=&quot;alert alert-success alert-dismissible&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
    &lt;h4&gt;&lt;i class=&quot;icon fa fa-check&quot;&gt;&lt;/i&gt; Alert!&lt;/h4&gt;
    Success alert preview. This alert is dismissable.
  &lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
    </div>
</article>